<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	</head>
	<body>

		<div id="app">
				
			<div id="app">
			    <table width="100%" style="text-align: center;">
			        <tr>
			            <th>商品编号</th>
			            <th>商品名称</th>
			            <th>商品单价</th>
			            <th>商品数量</th>
			            <th>合计</th>
			        </tr>
			        <tr>
			            <td>1</td>
			            <td>小米10</td>
			            <td>{{price}}</td>
			            <td>
			                <button @click="subtract">-</button>
								{{quantity}}
			                <button @click="add">+</button>
			            </td>
			            <td>
							<!-- {{price *quantity }} -->
							{{totalPrice}}
						</td>
			        </tr>
			    </table>
			</div>
		</div>
		
		<script>
			let vm = new Vue({
			        el: '#app',
			        data: {
			            price:2999,
			            quantity:1
			        },
			        computed:{
			           totalPrice(){
			               return this.price*this.quantity;
			           }
			        },
			        methods:{
			            add(){
			                this.quantity++;
			            },
			            subtract(){
			                this.quantity--;
			            },
						
			        }
			    });		
		
		
		</script>

	</body>
</html>
